.loading__pc {
  .loading__icon {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid var(--main-color);
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 2px;
      left: calc(50% - 1px);
      height: 12px;
      width: 2px;
      border-radius: 4px;
      background-color: var(--main-color);
      transform-origin: 50% 97%;
      animation: rotate 1s linear infinite;
      @keyframes rotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    }
    &::after {
      content: "";
      position: absolute;
      top: 4px;
      left: calc(50% - 1px);
      height: 10px;
      width: 2px;
      border-radius: 4px;
      background-color: var(--main-color);
      transform-origin: 50% 94%;
      animation: rotate 4s linear infinite;
      @keyframes rotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    }
  }
  .loading__text {
    margin-top: 6px;
    font-size: 12px;
    text-align: center;
    transform: translateX(3px);
    color: var(--main-color);
  }
}

.loading__m {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  animation: loaderM 1s ease-in-out infinite;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: -16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: loaderL 1s ease-in-out infinite;
  }
  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: -16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: loaderR 1s ease-in-out infinite;
  }
  @keyframes loaderL {
    0% { background-color: var(--main-color-light-bg); }
    25% { background-color: var(--main-color); }
    50% { background-color: var(--main-color-light-bg); }
    75% { background-color: var(--main-color-light-bg); }
    100% { background-color: var(--main-color-light-bg); }
  }
  @keyframes loaderM {
    0% { background-color: var(--main-color-light-bg); }
    25% { background-color: var(--main-color-light-bg); }
    50% { background-color: var(--main-color); }
    75% { background-color: var(--main-color-light-bg); }
    100% { background-color: var(--main-color-light-bg); }
  }
  @keyframes loaderR {
    0% { background-color: var(--main-color-light-bg); }
    25% { background-color: var(--main-color-light-bg); }
    50% { background-color: var(--main-color-light-bg); }
    75% { background-color: var(--main-color); }
    100% { background-color: var(--main-color-light-bg); }
  }
}
